<template>
  <div class="container">
    <el-tabs v-model="activeName">
      <!-- 角色管理 -->
      <el-tab-pane
        label="角色管理"
        name="first"
      >

      <!-- 新增角色弹窗 -->
      <el-dialog
        title="提示"
        :visible.sync="roleVisible"
        width="300"
      >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="ruleForm.roleName"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="roleDescription">
            <el-input v-model="ruleForm.roleDescription"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="onCancel">取 消</el-button>
          <el-button type="primary" @click="onOk">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 列表 -->
      <el-button type="primary" class="btn" @click="onAddRole">新增角色</el-button>
      <my-table
      :table-props="{
        data: roleList.rows,
        border: true
      }"
      :columns="[
        { label: '序号', prop: 'index', width: '200', align: 'center' },
        { label: '角色', prop: 'name', width: '200', align: 'center' },
        { label: '描述', prop: 'description', align: 'center' },
        { label: '操作', align: 'center', width: '350',slotName: 'handle' }
        ]"

      :pagination-props="{
        layout: 'total, sizes, prev, pager, next, jumper',
        total: roleList.total,

        pageSizes: [10, 20, 30, 40],

      }"
      :pagination-events="{
        'current-change': onCurrentPageChange,
        'size-change': onPageSizeChange
      }"
      >
      <template v-slot:handle="scope" :fixed="right">
        <el-button type="success" @click="onJurisdiction(scope.row.id)">分配权限</el-button>
        <el-button type="primary" @click="onEdit(scope.row.id)">编辑</el-button>
        <el-button type="danger" @click="onRemove(scope.row.id)">删除</el-button>
      </template>
      </my-table>
      <!-- 分配权限  -->
      <el-dialog
        title="分配权限"
        :visible.sync="jurisdictionVisible"
        width="300"
      >
        <el-tree
          ref="tree"
          :data="getJurisdictionTree"
          :show-checkbox="true"
          node-key="id"
          :check-on-click-node="true"
          :props="{ children: 'children',label: 'name'}">
        </el-tree>
        <span slot="footer" class="dialog-footer">
          <el-button @click="jurisdictionVisible = false">取 消</el-button>
          <el-button type="primary" @click="onjurisdictionVisibleOk">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 编辑角色弹窗 -->
       <el-dialog
        title="提示"
        :visible.sync="EditVisible"
        width="300"
      >
      <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="角色名称" prop="editName">
            <el-input v-model="editForm.editName"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" prop="editDescription">
            <el-input v-model="editForm.editDescription"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="EditVisible = false">取 消</el-button>
          <el-button type="primary" @click="onEditOk">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除提示框 -->
      <el-dialog
        title="提示"
        :visible.sync="removeVisible"
        width="300"
      >
        <span>确定删除此角色？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="removeVisible = false">取 消</el-button>
          <el-button type="primary" @click="onRemoveOk">确 定</el-button>
        </span>
      </el-dialog>
      </el-tab-pane>

      <!-- 公司信息 -->
      <el-tab-pane label="公司信息" name="second">
         <!-- 警告 -->
        <el-alert
          title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
          type="info"
          :closable="false"
          class="alet"
          show-icon>
        </el-alert>
        <el-form ref="form" :model="form" label-width="80px" disabled>
          <el-form-item label="公司名称" >
            <el-input v-model="company.name"></el-input>
          </el-form-item>
          <el-form-item label="公司地址">
            <el-input v-model="company.companyAddress"></el-input>
          </el-form-item>
          <el-form-item label="公司邮箱">
            <el-input v-model="company.mailbox"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" v-model="company.remarks"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
let currentId = null;
let aa = null;
import { mapActions, mapState, mapGetters } from 'vuex';
import * as roleApi from '../../api/role-management';
export default {
  data() {
    return {
      activeName: 'first',
      currentPage: 1,
      pageSize: 10,
      roleVisible: false,
      removeVisible: false,
      EditVisible: false,
      jurisdictionVisible: false,
      id: 1,
      arrPermIds: '',
      ruleForm: {
        roleName: '',
        roleDescription: '',
      },
      rules: {
        roleName: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' },
        ],
      },
      editForm: {
        editName: '',
        editDescription: '',
      },
      form: {
        name: '',
        companyAddress: '',
        mailbox: '',
        remarks: '',
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  computed: {
    ...mapState('role', ['roleList', 'roleDetails', 'jurisdictionList']),
    ...mapState('department', ['company']),
    ...mapGetters('role', ['getJurisdictionTree'])
  },
  methods: {
    ...mapActions('role', ['updateRoleList', 'updateRoleDetails', 'updateJurisdictionList']),
    ...mapActions('department', ['updateCompany']),
    onCurrentPageChange(val) {
    this.currentPage = val
    this.updateRoleList({
      page: this.currentPage,
      size: this.pageSize
    })
  },
  onPageSizeChange(val) {
    this.currentPage = 1
    this.pageSize = val
    console.log(this.pageSize)
    this.updateRoleList({
      page: this.currentPage,
      size: this.pageSize
    })
  },
  onAddRole() {
    this.roleVisible = true
  },
  onCancel() {
    this.roleVisible = false
  },
  onOk() {
    this.roleVisible = false;
    roleApi.AddRole({
      name: this.ruleForm.roleName,
      description: this.ruleForm.roleDescription
    })
  },
  onRemove(id) {
    this.removeVisible = true;
    currentId = id;

  },
  async onRemoveOk() {
    this.removeVisible = false;
    await roleApi.removeRole(currentId);
    this.updateRoleList({
    page: this.currentPage,
    size: this.pageSize
    })
  },
  async onEdit(id) {
    await this.updateRoleDetails(id);
    this.EditVisible = true;
    currentId = id;
    this.editForm.editName = this.roleDetails.name;
    this.editForm.editDescription = this.roleDetails.description;
  },
  async onEditOk() {
    this.EditVisible = false;
    await roleApi.updateRole({
      id: currentId,
      name: this.editForm.editName,
      description: this.editForm.editDescription,
      permIds: this.roleDetails.permIds
    });
    this.updateRoleList({
    page: this.currentPage,
    size: this.pageSize
    })
  },
  async onJurisdiction(id) {
    currentId = id;
    await this.updateJurisdictionList()
    await this.updateRoleDetails(id)
    setTimeout(() => {
    this.$refs.tree.setCheckedKeys(this.roleDetails.permIds);
    })
    this.jurisdictionVisible = true;
  },
  getCheckedKeys() {
    aa = this.$refs.tree.getCheckedKeys();
  },

  async onjurisdictionVisibleOk() {
    this.jurisdictionVisible = false;
    await this.getCheckedKeys()
    roleApi.permissionAssignment({
      id: currentId,
      permIds: aa
    })
    this.updateRoleList({
    page: this.currentPage,
    size: this.pageSize
  });
  },

},
created() {
  this.updateRoleList({
    page: this.currentPage,
    size: this.pageSize
  });
  this.updateCompany(this.id);

  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 16px;

  .btn {
    margin-bottom: 16px;
  }

  .alet {
    margin-bottom: 16px;
  }
}
</style>
